<template>
  <div class="main">
    <p class="title">{{ name }}</p>
    <div class="box">
      <div>
        <el-button-group>
          <!-- <el-button
            type="success"
            size="small"
            icon="el-icon-plus"
            @click="dialogVisible = true"
            >增加</el-button
          > -->
          <el-button type="success" size="small" @click="uspUp"
            >同步科室</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit-outline"
            @click="edit_row"
            >修改</el-button
          >
          <!-- <el-button
            type="danger"
            size="small"
            icon="el-icon-s-check"
            @click="sp_click"
            v-if="Permissions == '医务科审核'"
            :disabled="isBtnStatus != 0"
            >审批</el-button
          > -->
          <!-- s -->
          <!-- <el-button
            type="primary"
            size="small"
            icon="el-icon-document"
            @click="exportExcel"
            >导出</el-button
          > -->
        </el-button-group>
      </div>
      <div class="mt10">
        <!-- <span class="fw700 dpib">活动时间：</span>
        <el-date-picker
          v-model="isTime"
          @change="time_change"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          size="small"
        >
        </el-date-picker> -->
        <span class="fw700 dpib"> 搜索：</span>
        <el-input
          v-model="keyWords"
          placeholder=""
          change="dpib"
          style="width: 200px"
          size="small"
          clearable
        ></el-input>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="(query.CurrentPage = 1), search_list()"
          >查询</el-button
        >
      </div>
      <div class="mt10" v-loading="isLoading">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="550"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="UserName" label="用户名"> </el-table-column>
          <el-table-column prop="MainSectionName" label="主科室">
          </el-table-column>
          <el-table-column prop="Permissions" label="权限"> </el-table-column>
        </el-table>
      </div>
      <div class="mt10 tar">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange_page"
          :current-page="query.CurrentPage"
          :page-sizes="[10, 15, 50, 100]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query.total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 业务弹层 -->
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="max-height: 50vh; overflow: auto">
        <table border="1" cellspacing="0" style="width: 100%" class="table">
          <tr>
            <td class="tac">用户名：</td>
            <td>
              <el-input
                v-model="form.UserName"
                placeholder=""
                change="dpib"
                style="width: 100%"
                size="small"
              ></el-input>
            </td>
            <td class="tac">主科室：</td>
            <td>
              <el-select
                v-model="form.MainSectionId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in ksList"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                >
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td class="tac">权限：</td>
            <td colspan="3">
              <el-checkbox-group v-model="checkboxVal">
                <el-checkbox-button
                  v-for="item in checkboxList"
                  :label="item"
                  :key="item"
                  >{{ item }}</el-checkbox-button
                >
              </el-checkbox-group>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btn_ok">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审批弹层 -->
    <el-dialog
      title="审批"
      :visible.sync="dialogVisible_sp"
      width="50%"
      :before-close="handleClose_sp"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div>
        <table border="1" cellspacing="0" style="width: 100%" class="table">
          <tr>
            <td class="tac">意见：</td>
            <td colspan="3">
              <el-input
                v-model="form_sp.opinion"
                placeholder=""
                change="dpib"
                style="width: 100%"
                size="small"
                type="textarea"
                :rows="8"
              ></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose_sp">取 消</el-button>
        <el-button type="primary" @click="btn_ok_sp(1)" v-loading="btn_loading"
          >审 核</el-button
        >
        <el-button type="primary" @click="btn_ok_sp(2)" v-loading="btn_loading"
          >拒 绝</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      headers: {
        Token: "C0FD61EDA8A94248B1033706BD090555",
      },
      Permissions: window.localStorage.getItem("Permissions"),
      query: {
        tableName: "",
        pageSize: 10,
        CurrentPage: 1,
        total: 0,
        Filter: {},
      },
      tableData: [],
      tableLable: [
        "_id",
        "活动时间",
        "主科室",
        "用户名",
        "备注",
        "参与人员",
        "状态",
        "附件",
      ],
      userList: [],
      currentRow: null,
      dialogVisible: false,
      dialogVisible_sp: false,
      form: {
        UserList: [],
      },
      form_sp: {},
      isLoading: false,
      keyWords: "",
      arrayExport: [],
      baseUrl: baseUrl,
      附件Show: true,
      _id: "",
      btn_loading: false,
      isBtnStatus: 0,
      isTime: [],
      ksList: [],
      checkboxList: [
        "医务科审核",
        "科室审核",
        "信息科审核",
        "查看个人数据",
        "查看科室数据",
        "查看全院数据",
        "查看所有数据",
      ],
      checkboxVal: [],
    };
  },
  filters: {
    status(val) {
      var str = "";
      if (val == 0) {
        str = "未审核";
      }
      if (val == 1) {
        str = "已审核";
      }
      if (val == 2) {
        str = "已拒绝";
      }
      return str;
    },
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getList();
    this.getUserList();
    this.getksList();
  },
  methods: {
    uspUp() {
      this.$get("/Usp/SynchronizeData").then((res) => {
        this.getList();
      });
    },
    getList() {
      this.isLoading = true;
      this.$post("/Usp/GetUserList", this.query)
        .then((res) => {
          if (res.StatusCode != 200) {
            this.$notify.error({
              title: "错误",
              message: res.Errors,
            });
            this.isLoading = false;
            return;
          } else {
            this.tableData = res.Data.PageList;
            this.query.total = res.Data.Total;
            this.handleExportData();
            this.isLoading = false;
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    getUserList() {
      this.$post("/Bs/GetAllUserList").then((res) => {
        this.userList = res.Data;
      });
    },
    getksList() {
      this.$get("/Bs/GetSectionList").then((res) => {
        this.ksList = res.Data;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
      this.getList();
    },
    handleCurrentChange_page(val) {
      console.log(val);
      this.query.CurrentPage = val;
      this.getList();
    },
    handleCurrentChange(val) {
      if (!val) {
        return;
      }
      this.currentRow = val;
      console.log(this.currentRow);
      this.isBtnStatus = val.状态;
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {};
      this.checkboxVal = [];
      this._id = "";
      this.附件Show = true;
    },
    handleClose_sp() {
      this.dialogVisible_sp = false;
      this.form_sp = {};
    },
    btn_ok() {
      var body = this.form;
      body.Permissions = this.checkboxVal ? this.checkboxVal.join("|") : "";
      console.log(body);
      var url = "/Usp/UpdateUserInfo";
      this.$post(url, body).then((res) => {
        if (res.StatusCode != 200) {
          this.$notify.error({
            title: "错误",
            message: res.Errors,
          });
          return;
        } else {
          this.getList();
          this.handleClose();
        }
      });
    },
    btn_ok_sp(flag) {
      var body = {
        tableName: "主科室维护",
        status: flag,
        opinion: this.form_sp.opinion,
        _id: this.currentRow._id,
      };
      this.btn_loading = true;
      this.$post("/Bs/Approve", body).then((res) => {
        if (res.StatusCode != 200) {
          this.$notify.error({
            title: "错误",
            message: res.Errors,
          });
          this.btn_loading = false;
          return;
        }
        this.getList();
        this.handleClose_sp();
        this.btn_loading = false;
      });
    },
    edit_row() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.isLoading = true;
      console.log(this.currentRow);
      this.form = this.currentRow;
      if (this.currentRow.Permissions) {
        this.checkboxVal = this.currentRow.Permissions.split("|");
      }
      console.log(this.checkboxVal);
      // this._id = res.Data._id;
      this.isLoading = false;
      this.dialogVisible = true;
    },
    deletl_row() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.isLoading = true;
      this.$post("/Bs/Delete/主科室维护/" + this.currentRow._id).then((res) => {
        this.getList();
      });
    },
    sp_click() {
      if (this.currentRow == null) {
        this.$notify.error({
          title: "错误",
          message: "请选中一条数据后操作！",
        });
        return;
      }
      this.dialogVisible_sp = true;
    },
    search_list() {
      if (this.keyWords == "") {
        if (this.query.Filter.活动时间_From && this.query.Filter.活动时间_To) {
          this.query.Filter = {
            活动时间_From: this.query.Filter.活动时间_From
              ? this.query.Filter.活动时间_From
              : null,
            活动时间_To: this.query.Filter.活动时间_To
              ? this.query.Filter.活动时间_To
              : null,
          };
        } else {
          this.query.Filter = {};
        }
        this.getList();
        return;
      } else {
        for (var i in this.tableLable) {
          if (
            this.tableLable[i] == "_id" ||
            this.tableLable[i] == "备注" ||
            this.tableLable[i] == "参与人员" ||
            this.tableLable[i] == "状态" ||
            this.tableLable[i] == "活动时间" ||
            this.tableLable[i] == "附件"
          ) {
          } else {
            this.query.Filter[this.tableLable[i]] = this.keyWords;
          }
        }
        this.query.Filter.name = this.keyWords;
        this.getList();
      }
    },
    handleExportData() {
      // this.arrayExport
      for (const key in this.tableData) {
        let arrayRow = {};

        for (var i in this.tableLable) {
          if (this.tableData[key].Data[this.tableLable[i]] !== undefined) {
            arrayRow[this.tableLable[i]] =
              this.tableData[key].Data[this.tableLable[i]];
          } else {
            arrayRow[this.tableLable[i]] = "";
          }
        }
        arrayRow._id = this.tableData[key]._id;
        arrayRow.状态 = this.tableData[key].BaseInfo.Status;
        for (var j in this.tableData[key].UserList) {
          arrayRow.参与人员 +=
            this.tableData[key].UserList[j].UserInfo.UserName + " ";
        }
        this.arrayExport.push(arrayRow);
      }
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excel/Export2Excel");
        const tHeader = this.tableLable;
        // 上面设置Excel的表格第一行的标题
        const filterVal = this.tableLable;
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.arrayExport; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 上传
    upload_success(response, file, fileList) {
      this.form.附件 =
        this.baseUrl.baseIp + "/acdn/upload/" + response.Data.FileRelativePath;
      this.附件Show = false;
    },
    upload_delete() {
      this.form.附件 = "";
      this.附件Show = true;
    },
    open_windo(url) {
      window.open(url);
    },
    time_change(val) {
      if (val === null) {
        this.query.Filter.活动时间_From = null;
        this.query.Filter.活动时间_To = null;
        return;
      }
      this.query.Filter.活动时间_From = val[0];
      this.query.Filter.活动时间_To = val[1];
    },
  },
};
</script>

<style scoped lang='scss'>
.main {
  height: calc(100vh - 47px);
  background-color: #fff;
  overflow: hidden;
  .title {
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #000;
  }
  .box {
    height: calc(100vh - 120px);
    padding: 0 10px;
  }
}
.fw700 {
  font-weight: 700;
}
.mt10 {
  margin-top: 10px;
}
.dpib {
  display: inline-block;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: #00710f;
  color: #fff;
}
.tar {
  text-align: right;
}
.tac {
  text-align: center;
}
::v-deep .el-upload__input {
  display: none;
}
</style>